<template>
  <view class="container">
    <!-- 模式切换 -->
    <view class="mode-switch">
      <text 
        :class="['mode-text', { active: isLogin }]"
        @click="toggleMode(true)"
      >登录</text>
      <text class="divider">/</text>
      <text 
        :class="['mode-text', { active: !isLogin }]"
        @click="toggleMode(false)"
      >注册</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <view class="input-group">
        <uni-icons type="email" size="20" color="#999" class="input-icon" />
        <input 
          class="form-input"
          placeholder="账号"
		  v-model="loginParm.username"
          
        />
      </view>

      <view class="input-group">
        <uni-icons type="locked" size="20" color="#999" class="input-icon" />
        <input 
          class="form-input"
          placeholder="密码"
		  v-model="loginParm.password"
		
          password
        />
      </view>
	  
	  <view class="input-group" v-if="!isLogin">
	    <uni-icons type="locked" size="20" color="#999" class="input-icon" />
	    <input 
	      class="form-input"
	      placeholder="确认密码"
	  		  v-model="loginParm.confirm"
	  		
	      password
	    />
	  </view>
	  
	  <view class="input-group login-code" >
	    <uni-icons type="info" size="20" color="#999" class="input-icon" />
	    <input 
	      class="form-input"
	      placeholder="验证码"
		  v-model="loginParm.code"
		  
	      
	    />
		<image @click="getCode" class="code-img" :src="baseCodeUrl + codeUrl"></image>
	  </view>

      <!-- 动态注册字段 -->
    <!--  <view class="input-group" v-if="!isLogin">
        <uni-icons type="person" size="20" color="#999" class="input-icon" />
        <input 
          class="form-input"
          placeholder="用户名"
          placeholder-class="placeholder"
        />
      </view>
 -->
      <button 
        class="submit-btn"
        hover-class="submit-btn-hover"
        @click="handleSubmit"
      >
        {{ isLogin ? '立即登录' : '注册账号' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {apiGetCode,apiLogin,apiGetUserInfo,apiRegister} from '@/api/articleApi.js'

const loginParm = ref({
	username:null,
	password:null,
	confirm:null,
	code:null,
	uuid:null
})
const isLogin = ref(true)
const codeUrl = ref()

const baseCodeUrl = ref("data:image/gif;base64,")
function toggleMode(item){
	isLogin.value = item
	loginParm.value = {}
}
function clearInput(event){
	event.detail.value;
}


async function handleSubmit(){
	
	//登录
	if(isLogin.value){
		const res = await apiLogin(loginParm.value)
		if(res.code === 500){
			uni.showToast({
				title:res.msg,
				icon:"none"
			})
			getCode()
		}else{
			//得到token
			const token = res.token
			uni.setStorageSync("token",token);	
			const {data} =  await apiGetUserInfo(token);
			uni.setStorageSync("userInfo",data);
			uni.switchTab({
				url:"/pages/user/user"
			})
		}
		
		
		
	}else{
		const res = await apiRegister(loginParm.value)
		if(res.code === 200){
			uni.showToast({
				title:"注册成功",
				icon:"success"
			})
			isLogin.value = true
		}else{
			uni.showToast({
				title:res.msg,
				icon:"none"
			})
		}
		loginParm.value.code = null
		getCode()
	}
	
}
async function getCode(){
	const res = await apiGetCode()
	codeUrl.value = res.img
	loginParm.value.uuid = res.uuid
}
getCode()
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background: #f8f9fa;
  padding: 60rpx 50rpx;
}

.mode-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80rpx;
  position: relative;

  .mode-text {
    font-size: 40rpx;
    color: #ccc;
    transition: all 0.3s ease;
    padding: 0 20rpx;
    position: relative;

    &.active {
      color: #333;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: -10rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 4rpx;
        background: linear-gradient(90deg, #6a85b6 0%, #bac8e0 100%);
      }
    }
  }

  .divider {
    color: #ddd;
    font-size: 34rpx;
    margin: 0 10rpx;
  }
}

.form-container {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.05);
}

.input-group {
  position: relative;
  margin-bottom: 50rpx;
  border-bottom: 1rpx solid #eee;
  transition: border-color 0.3s ease;

  &:focus-within {
    border-color: #6a85b6;

    .input-icon {
      color: #6a85b6 !important;
    }
  }
}

.form-input {
  height: 80rpx;
  padding-left: 60rpx;
  font-size: 30rpx;
  color: #333;
}

.input-icon {
  position: absolute;
  left: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.placeholder {
  color: #ccc;
  font-size: 28rpx;
}

.submit-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%);
  color: #fff;
  font-size: 32rpx;
  transition: all 0.3s ease;
  box-shadow: 0 10rpx 20rpx rgba(168,192,255,0.3);
  border: none;
}

.submit-btn-hover {
  transform: translateY(2rpx);
  box-shadow: 0 5rpx 15rpx rgba(168,192,255,0.3);
}
.login-code{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.code-img{
		height: 80rpx;
		width: 200rpx;
	}
}
</style>